<template>
	<view>
		<view class="tabbar">
			<view v-for="(item, index) in tabList" :key="index" @click="switchTab(item.url)">
				<view class="tab">
					<uv-icon :name="item.icon" size="30"
						:color="active == index ? themeColor : ''"></uv-icon>
					<view :class="active == index ? 'tab-active' : ''">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<u-gap height="100"></u-gap>
	</view>
</template>

<script>
export default {
	name: 'tabbar',
	props: {
		active: {
			type: Number,
			default: 0
		}
	},
	computed: {},
	data() {
		return {
			tabList: [
				{
					name: '首页',
					url: '/pages/index/index',
					icon: 'home',
					active: false
				},
				{
					name: '广场',
					url: '/pages/square/square',
					icon: 'grid',
					active: false
				},
				{
					name: '我的',
					url: '/pages/me/me',
					icon: 'account',
					active: false
				}
			]
		};
	},
	methods: {
		switchTab(url) {
			if (url == '/pages/Forum/CreatePost/CreatePost') {
				uni.navigateTo({ url });
			} else {
				uni.switchTab({ url });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.tabbar {
	background-color: #fff;
	width: 750rpx;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding-bottom: env(safe-area-inset-bottom);
	padding: 15rpx 0;
	display: flex;
	justify-content: space-around;

	.tab {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		align-items: center;
		width: 80rpx;

		&-active {
			color: $theme-color;
		}
	}
}

.test {
	background-color: $theme-color;
}

.plus {
	width: 80rpx;
	height: 80rpx;
	background-color: #f17700;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto 25rpx;
}

.plus:active {
	background-color: $theme-color;
}
</style>
